<template>
   <div class="container">
      <div class="title">
            <h2>数据分析/销售日月报表</h2>
      </div>
           <div class="barS">
            <div class="top-right">
                  <span class="time">时间类型：</span> 
                <span class="time" @click="numtime(7)"  :class="istindex==7?'active':'' ">最近7天</span>
                <span   class="time" @click="numtime(30)"  :class="istindex==30?'active':''">最近30天</span>  
                    </div>
                  <div class="filter-container">
                     <div class="left">
                           <span class="dataTime">
                        <span class="time">时间：</span> 
                            <!-- 日期选择 -->
                      <el-date-picker
                        v-model="value1"
                        type="date"
                        placeholder="选择日期">
                      </el-date-picker>
                
                      </span>
                    <span class="dataTime">组别:</span>    
                  <Select class="toolbar-item Select" clearable v-model="orderStatus" @on-change="handleFilter" style="width:150px;" placeholder="状态">
                     <Option v-for="item in calendarTypeOptions" :value="item.value" :key="item.value">{{ item.label }}</Option>
                </Select>
                       </div> 
                  <div class="right">
                     <el-button v-waves class="toolbar-item Selects"  type="primary" icon="el-icon-search" @click="handleFilter">查询</el-button>
                    <el-button v-waves :loading="downloadLoading" class="toolbar-item Selects" type="primary" icon="el-icon-download" @click="handleDownload">导出</el-button>
                    <el-button v-model="showReviewer" class="toolbar-item Selects" style="margin-left:15px;" @change="tableKey=tableKey+1">清空</el-button>
                  </div>
                 <!-- <span class="time">商品名称</span>  --> 
                  </div>
                      <div class="getgoodlist">
                         <el-table
                            :data="tableData"
                            style="width: 100%"
                            :default-sort = "{prop: 'date', order: 'descending'}"
                            >
                            <el-table-column
                            prop="data"
                            label="日期"
                            sortable
                           >
                            </el-table-column>
                             <el-table-column
                            prop="volumeAmount"
                            label="销售金额"
                            sortable
                           >
                            </el-table-column>
                            <el-table-column
                            prop="ProductAmount"
                            label="订单总数"
                            sortable
                            >
                            </el-table-column>
                             <el-table-column
                            prop="volume"
                            label="出售商品数量"
                            sortable
                            >
                            </el-table-column>
                            
                             <el-table-column
                            prop="discount"
                            label="促销优惠金额"
                            sortable
                            >
                            </el-table-column>
                      
                             <el-table-column
                            prop="RefundAmount"
                            label="退款金额"
                            sortable
                           >
                            </el-table-column>
                    
                             <el-table-column
                            prop="pastAmount"
                            label="过期金额"
                            sortable
                            >
                            </el-table-column>
                             <el-table-column
                            prop="TotalAmount"
                            label="总额"
                            sortable
                            >
                            </el-table-column>
                        </el-table>
                        	    <div class="Pagination" style="text-align: left;margin-top: 20px;float:right;padding-right:40px">
                               <div class="page-foot">
                                        <el-pagination @size-change="handleSizeChange" 
                                        @current-change="handleCurrentChange" 
                                        :current-page="pageNumber" :page-sizes="[3, 10, 50, 100]" 
                                        :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" 
                                        :total="totalCount">
                                        </el-pagination>
                                    </div>
                    </div>
                    </div>
           </div>
   </div>
</template>
<script>
export default {
  data() {
    return {
      listQuery: {
        pageNumber: 1,
        pageSize: 20,
        importance: undefined,
        title: undefined,
        type: undefined
        // sort: '+id'
      },
      isShowIntroduction: true,
      value1: "",
      pageNumber: 1, // 页码
      pageSize: 5, // 页容量
      totalCount: 20, //总数
      //下载
      downloadLoading: false,
      orderTime: [],

      calendarTypeOptions: [
        {
          value: 0,
          label: "组一"
        },
        {
          value: 1,
          label: "组二"
        },
        {
          value: 2,
          label: "组三"
        },

        {
          value: 3,
          label: "组三"
        }
      ],

      //清单
      tableData: [],
    };
  },
  methods: {
    //搜索
    handleFilter() {},
    // 当页容量改变
    handleSizeChange(pageSize) {
      this.pageSize = pageSize;
      this.pageNumber = 1;
      //   this.Myordergoodlist();
    },
    // 当页码改变
    handleCurrentChange(pageNumber) {
      this.pageNumber = pageNumber;
      //   this.Myordergoodlist();
    },
    //下载
    handleDownload() {
      this.downloadLoading = true;
      import("@/vendor/Export2Excel").then(excel => {
        const tHeader = ["timestamp", "title", "type", "importance", "status"];
        const filterVal = [
          "timestamp",
          "title",
          "type",
          "importance",
          "status"
        ];
        const data = this.formatJson(filterVal, this.list);
        excel.export_json_to_excel({
          header: tHeader,
          data,
          filename: "table-list"
        });
        this.downloadLoading = false;
      });
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v =>
        filterVal.map(j => {
          if (j === "timestamp") {
            return parseTime(v[j]);
          } else {
            return v[j];
          }
        })
      );
    },
    //日期选择计算
    TimetoChange() {
      // 计算时间间隔
      var date = new Date(this.orderTime[0]); //开始时间
      var startData =
        date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate();
      //  "yyyy-MM-dd ");
      var dataold = new Date(this.orderTime[1]); //结束时间
      this.endDateStr =
        date.getFullYear() +
        "-" +
        (dataold.getMonth() + 1) +
        "-" +
        dataold.getDate();
      var LentData = dataold.getTime() - date.getTime(); //时间差的毫秒数
      //计算出相差天数
      this.interval = Math.floor(LentData / (24 * 3600 * 1000));
      //调用环形图
      this.recentDay = this.interval;
      this.echarts(this.interval);
      this.drawLine(this.recentDay);
    },
    
  }
};
</script>

<style lang="less" scoped>
@import "../../style/MarketingList/SalesReport.less";
</style>



